$(function() {
	//全局ui对象
	var $ui = $("#app");
	//出现的地鼠的索引
	var selectedDishu;
	//按钮 分数 时间 控件
	var $beginBtn, $aboutBtn, $score, $time;
	//定时器
	var timer, timeTimer;
	//坑坐标
	var kengsPosition = [{
		left: 105,
		top: 135
	}, {
		left: 230,
		top: 135
	}, {
		left: 365,
		top: 135
	}, { //2
		left: 85,
		top: 195
	}, {
		left: 230,
		top: 195
	}, {
		left: 365,
		top: 195
	}, { //3
		left: 83,
		top: 258
	}, {
		left: 232,
		top: 258
	}, {
		left: 378,
		top: 258
	}, ];
	//关于
	var ABOUT_TEXT = "本游戏由星时代曹波涛连夜打造完成。" +
		"HTML5打地鼠小游戏，打地鼠图片素材来源于网络，如有侵权，联系删除。" +
		"最终版权归 曹波涛所有。点击任意地方即可退出！建议在谷歌，火狐等浏览器上玩耍。";
		
	var indexRandom = function(){
		return Math.floor(Math.random() * 10);
	}
	//显示地鼠的函数
	var showDishu = function() {
		var index = indexRandom();
		while (index == selectedDishu) {
			index = indexRandom();
		}
		selectedDishu = index;
		$dishu = $("<img></img>")
			.attr("src", "./img/dishu.png")
			.addClass("keng-img")
			.attr("no", index)
		$(".keng")
			.eq(index)
			.append($dishu)
		setTimeout(function() {
			$(".keng")
				.eq(index)
				.empty()
		}, 1000);
	}

	//游戏的生命周期
	var app = {
		init: function() {
			console.log("初始化")
			$ui.empty().css({
				"backgroundImage": "url(./img/welcome.jpg)",
				"cursor": "auto"
			})
			$beginBtn = $("<button></button>")
				.text("开始游戏")
				.addClass("beginBtn")
				.click(function(e) {
					e.stopPropagation();
					$beginBtn.remove();
					$aboutBtn.remove();
					app.begin();
				})
				.appendTo($ui)
			$aboutBtn = $("<button></button>")
				.text("关于游戏")
				.addClass("aboutBtn")
				.appendTo($ui)
				.click(function(e) {
					e.stopPropagation()
					$panel = $("<div></div>")
						.addClass("panel")
						.append($("<h3>关于</h3>"))
						.append($("<p></p>").text(ABOUT_TEXT))
						.appendTo($ui)
					$ui.click(function() {
						$panel.remove();
					})
				})
		},
		begin: function() {
			console.log("开始游戏")
			for (var i = 0; i < 9; i++) {
				$("<div></div>")
					.addClass("keng")
					.attr("no", i)
					.css({
						"left": kengsPosition[i].left,
						"top": kengsPosition[i].top,
					})
					.appendTo($ui)
			}
			//分数
			$score = $("<div><div>")
				.html("0")
				.addClass("score")
				.appendTo($ui)
			//计时
			$time = $("<div><div>")
				.text("30")
				.addClass("time")
				.appendTo($ui)
			timeTimer = setInterval(function() {
				$time.text(parseInt($time.text()) - 1);
				if ($time.text() == 0) {
					app.exit();
				}
			}, 1000)


			$ui.css({
				"backgroundImage": "url(./img/game_bg.png)",
				"cursor": "url(./img/chuizi.png) 25 25 ,pointer"
			}).click(function(e) {
				var $target = $(e.target)
				if ($target.hasClass("keng") || $target.hasClass("keng-img")) {
					if ($target.attr("no") == selectedDishu) {
						//加分
						$score.text(parseInt($score.text()) + 5);
						//更换被砸地鼠图片
						$beida = $("<img></img>")
							.attr("src", "./img/beida.png")
							.addClass("keng-img")
							.attr("no", selectedDishu)
						$(".keng")
							.eq(selectedDishu)
							.empty()
							.append($beida)
						selectedDishu = null
					}
				} else {
					console.log("没砸中")
				}
			})
			//定时出现地鼠
			showDishu()
			timer = setInterval(showDishu, 1000)
		},
		exit: function() {
			console.log("退出游戏")
			clearInterval(timer)
			clearInterval(timeTimer)

			$panel = $("<div></div>")
				.addClass("panel")
				.addClass("game-over-panel")
				.append($("<h3>游戏结束</h3>"))
				.append($("<p></p>").text("你的得分是：" + $score.text()))
				.append($("<p></p>").text("点击任意地方继续···"))
				.appendTo($ui)
				.click(function() {
					$panel.remove();
					app.init();
				})
		}
	}

	app.init();
})
